<template>
  <!-- 添加或修改商户信息-发票对话框 -->
  <el-form ref="merchantInvoiceRef" :model="form" :rules="rules" label-width="150px" class="many-box">
    <el-row>
      <el-col :span="24" class="title">发票信息</el-col>
      <el-col :span="12">
        <el-form-item label="发票抬头: " prop="header">
          <el-input v-model="form.header" placeholder="请输入发票抬头" v-if="isEdit" />
          <span v-else>{{ form.header }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="企业税号: " prop="taxNumber">
          <el-input v-model="form.taxNumber" placeholder="请输入企业税号" v-if="isEdit" />
          <span v-else>{{ form.taxNumber }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱: " prop="mail">
          <el-input v-model="form.mail" placeholder="请输入邮箱" v-if="isEdit" />
          <span v-else>{{ form.mail }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="企业电话: " prop="phone">
          <el-input v-model="form.phone" placeholder="请输入企业电话" v-if="isEdit" />
          <span v-else>{{ form.phone }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开户银行: " prop="bankName">
          <el-input v-model="form.bankName" placeholder="请输入开户银行" v-if="isEdit" />
          <span v-else>{{ form.bankName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="银行账号: " prop="bankNumber">
          <el-input v-model="form.bankNumber" placeholder="请输入银行账号" v-if="isEdit" />
          <span v-else>{{ form.bankNumber }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="企业地址: " prop="address">
          <el-input v-model="form.address" placeholder="请输入企业地址" v-if="isEdit" />
          <span v-else>{{ form.address }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24" class="title">专票收件信息</el-col>
      <el-col :span="12">
        <el-form-item label="专票收件姓名: " prop="ticketName">
          <el-input v-model="form.ticketName" placeholder="请输入专票收件姓名" v-if="isEdit" />
          <span v-else>{{ form.ticketName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专票收件电话: " prop="ticketPhone">
          <el-input v-model="form.ticketPhone" placeholder="请输入专票收件电话" v-if="isEdit" />
          <span v-else>{{ form.ticketPhone }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="专票收件地址: " prop="ticketAddress">
          <el-input v-model="form.ticketAddress" placeholder="请输入专票收件地址" v-if="isEdit" />
          <span v-else>{{ form.ticketAddress }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="" v-if="isEdit">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </el-form-item>
        <el-form-item label="" v-else>
          <el-button type="primary" @click="isEdit = true">编 辑</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="MerchantInvoice">
import { getMerchantInvoice, updateMerchantInvoice, getMyMerchantInvoice } from "@/api/business/merchantInvoice";

const { proxy } = getCurrentInstance();
const isEdit = ref(false);
const form = reactive({})


function init() {
  getMyMerchantInvoice().then(response => {
    Object.assign(form, response.data);
  })
}

// 取消
function cancel() {
  isEdit.value = false;
  init()
}

// 确定
function submitForm() {
  updateMerchantInvoice(form).then(response => {
    proxy.$modal.msgSuccess("修改成功");
    isEdit.value = false;
  });
}

init()


</script>

<style lang="scss" scoped>
.many-box {
  padding: 30px;

  .title {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;

    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 20px;
      background-color: #409eff;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}
</style>
